import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState, useRef } from "react";
import {
	Image,
	message,
	Select,
	Button,
	Card,
	Tag,
	Tabs,
	DatePicker,
	Cascader,
} from "antd";
import { areaList, managerList, regenerant, regionData } from "./service";
import { DynamicFormItem } from "@/components/DynamicForm";
import type { TableListItem } from "./data";
import axios from "axios";
import { arrayToObject, getArray, getString, getObject } from "phinney-toolkit";
import moment from "moment";
const CommunityMan: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;

	let [regionList, setRegionList] = useState<any>([]);
	let [parentId, setParentId] = useState<any>("4101");
	const [defaultValue, setDefaultValue] = useState([]);

	//区域列表
	const getRegionList = async () => {
		const res = await regionData({
			pageIndex: 1,
			pageSize: 99,
			parentId,
		});
		!isUnMounted &&
			setRegionList(
				getArray(res?.data.records).map((item) => ({
					label: item?.regionName,
					value: item?.regionId,
				}))
			);
	};
	// 表格项
	const columns: ProColumns<TableListItem>[] = [
		{
			title: "ID",
			dataIndex: "regionId",
			search: false,
		},
		{
			title: "社区名称",
			dataIndex: "regionName",
			search: false,
		},
		{
			title: "选择区街道",
			dataIndex: "parentId",
			hideInTable: true,
			renderFormItem: (
				item,
				{ type, defaultRender, record, ...rest },
				filterForm
			) => {
				return (
					<Cascader
						options={regionList}
						allowClear={false}
						onChange={async (value: any, selectedOptions: any) => {
							const targetOption = selectedOptions[selectedOptions.length - 1];
							let selectParentId =
								selectedOptions[selectedOptions.length - 1].value;
							if (selectedOptions[1]) {
								filterForm.setFieldsValue({
									parentId: value,
									region: selectParentId,
								});
								return;
							}
							const res = await regionData({
								pageIndex: "1",
								pageSize: "99",
								parentId: selectParentId,
							});
							const newData: any = [];
							res.data.records.map((item: any) => {
								return newData.push({
									label: item?.regionName,
									value: item?.regionId,
								});
							});

							console.log(newData, "->>>>newData");
							targetOption.children = newData;
							setDefaultValue(value);
						}}
					/>
				);
			},
		},
	];
	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "text",
				label: "名称",
				name: "regionName",
				required: true,
			},
			{
				type: "textarea",
				label: "围栏坐标点",
				name: "specShape",
				required: true,
			},
			{
				type: "text",
				label: "社区纬度",
				name: "lat",
				required: true,
			},
			{
				type: "text",
				label: "社区经度",
				name: "lon",
				required: true,
			},
			{
				type: "select",
				label: "经纬度开通状态",
				name: "businessStatus",
				required: true,
				options: [
					{
						label: "否",
						value: 0,
					},
					{
						label: "是",
						value: 1,
					},
				],
			},
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "regionId",
		scroll: { x: 1000 },
		columns,
		listProps: {
			url: "/region/list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				let arrs = getArray(params.parentId);
				console.log(arrs, "_:>>arrs");

				// params.parentId = arrs[1] ? arrs[1] : "";
				return {
					...params,
					lv: 6,
					parentId: arrs[1] ? arrs[1] : "",
				};
			},
		},
		updateProps: {
			url: "/region/edit",
			method: "POST",
			requestType: "params",
			paramsHandle: ({ ...params }: any, record: any) => {
				return {
					...params,
				};
			},

			modalProps: {
				formProps: {
					labelCol: { span: 8 },
				},
				formValuesHandle: async (record: any, form: any) => {
					const { ...others } = record;
					return {
						...others,
						businessStatus: 0,
					};
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm, true);
				},
			},
		},
	};

	// 初始化加载数据
	useEffect(() => {
		getRegionList();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default CommunityMan;
